{% extends 'base.html' %}
{% load static %}

{% block title %}机房列表{% endblock %}

{% block content %}
<div class="container">
    <h2 class="mb-4">机房管理</h2>
    <div class="row mb-3">
        <div class="col">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addIDCModal">
                添加机房
            </button>
        </div>
    </div>
    
    <div class="row">
        {% for idc in idcs %}
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ idc.name }}</h5>
                    <p class="card-text">位置：{{ idc.location }}</p>
                    <p class="card-text">{{ idc.description|truncatewords:20 }}</p>
                    <a href="{% url 'idc_detail' idc.id %}" class="btn btn-info">查看详情</a>
                    <a href="{% url 'idc_3d' idc.id %}" class="btn btn-primary">3D视图</a>
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" 
                            data-bs-target="#addRackModal" 
                            data-idc-id="{{ idc.id }}"
                            data-idc-name="{{ idc.name }}">
                        添加机柜
                    </button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- 添加机房模态框 -->
<div class="modal fade" id="addIDCModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加机房</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'add_idc' %}">
                <div class="modal-body">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="idc-name" class="form-label">机房名称</label>
                        <input type="text" class="form-control" id="idc-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="idc-location" class="form-label">位置</label>
                        <input type="text" class="form-control" id="idc-location" name="location" required>
                    </div>
                    <div class="mb-3">
                        <label for="idc-description" class="form-label">描述</label>
                        <textarea class="form-control" id="idc-description" name="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加机柜模态框 -->
<div class="modal fade" id="addRackModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加机柜</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'add_rack' %}">
                <div class="modal-body">
                    {% csrf_token %}
                    <input type="hidden" id="idc-id" name="idc_id">
                    <div class="mb-3">
                        <label class="form-label">所属机房</label>
                        <input type="text" class="form-control" id="idc-display-name" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="rack-name" class="form-label">机柜名称</label>
                        <input type="text" class="form-control" id="rack-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-position" class="form-label">位置编号</label>
                        <input type="text" class="form-control" id="rack-position" name="position" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-capacity" class="form-label">容量(U)</label>
                        <input type="number" class="form-control" id="rack-capacity" name="capacity" value="42" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-power-capacity" class="form-label">电力容量(W)</label>
                        <input type="number" class="form-control" id="rack-power-capacity" name="power_capacity" value="2000" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-x-position" class="form-label">X坐标</label>
                        <input type="number" class="form-control" id="rack-x-position" name="x_position" step="0.1" required>
                    </div>
                    <div class="mb-3">
                        <label for="rack-y-position" class="form-label">Y坐标</label>
                        <input type="number" class="form-control" id="rack-y-position" name="y_position" step="0.1" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    // 处理添加机柜按钮点击事件
    document.addEventListener('DOMContentLoaded', function() {
        const addRackModal = document.getElementById('addRackModal');
        addRackModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const idcId = button.getAttribute('data-idc-id');
            const idcName = button.getAttribute('data-idc-name');
            
            addRackModal.querySelector('#idc-id').value = idcId;
            addRackModal.querySelector('#idc-display-name').value = idcName;
        });
    });
</script>
{% endblock %} 